<template>
  <div class="bg-box">
    <t-table
      row-key="index"
      table-layout="auto"
      class="plugin-reports-ticket-table"
      :data="list"
      :columns="columns"
      :footData="[total]"
      hover
    >
      <template #time="{ rowIndex }">
        <div class="time">{{ time[rowIndex] }}</div>
      </template>
      <template #print="{ row }">
        {{ app.money.format(row.p?.m ?? 0) }}<t-divider layout="vertical" />{{ row.p?.c ?? 0 }}
      </template>
      <template #ticket="{ row }">
        {{ app.money.format(row.t?.m ?? 0) }}<t-divider layout="vertical" />{{ row.t?.c ?? 0 }}
      </template>
      <template #print_refund="{ row }">
        {{ app.money.format(row.pr?.m ?? 0) }}<t-divider layout="vertical" />{{ row.pr?.c ?? 0 }}
      </template>
      <template #ticket_refund="{ row }">
        {{ app.money.format(row.tr?.m ?? 0) }}<t-divider layout="vertical" />{{ row.tr?.c ?? 0 }}
      </template>
      <template #total="{ row }">
        <b>{{ app.money.format(row.total?.m ?? 0) }}<t-divider layout="vertical" />{{ row.total?.c ?? 0 }}</b>
      </template>

      <template #footPrint>
        {{ app.money.format(total.p?.m ?? 0) }}<t-divider layout="vertical" />{{ total.p?.c ?? 0 }}
      </template> 
      <template #footTicket>
        {{ app.money.format(total.t?.m ?? 0) }}<t-divider layout="vertical" />{{ total.t?.c ?? 0 }}
      </template> 
      <template #footPrintRefund>
        {{ app.money.format(total.pr?.m ?? 0) }}<t-divider layout="vertical" />{{ total.pr?.c ?? 0 }}
      </template> 
      <template #footTicketRefund>
        {{ app.money.format(total.tr?.m ?? 0) }}<t-divider layout="vertical" />{{ total.tr?.c ?? 0 }}
      </template> 
      <template #footTotal>
        <div class="total" style="text-align: right">{{ app.money.format(total.total?.m ?? 0) }}<t-divider layout="vertical" />{{ total.total?.c ?? 0 }}</div>
      </template> 
    </t-table>
  </div>
</template>
<script setup>
  import app from '@/app'
  import index from '../../index'

  const props = defineProps(['total', 'list', 'time'])
  const plugin = index.plugin
  const columns = [{
    colKey: 'time',
    cell: 'time'
  }, {
    title: plugin.t('ticket.print'),
    colKey: 'print',
    cell: 'print',
    foot: 'footPrint'
  }, {
    title: plugin.t('ticket.ticket'),
    colKey: 'ticket',
    cell: 'ticket',
    foot: 'footTicket'
  }, {
    title: plugin.t('ticket.print_refund'),
    colKey: 'print_refund',
    cell: 'print_refund',
    foot: 'footPrintRefund'
  }, {
    title: plugin.t('ticket.ticket_refund'),
    colKey: 'ticket_refund',
    cell: 'ticket_refund',
    foot: 'footTicketRefund'
  }, {
    title: plugin.t('ticket.total'),
    colKey: 'total',
    align: 'right',
    fixed: 'right',
    foot: 'footTotal'
  }]
</script>
<style lang="scss">
  @import '@/style/global';

  .plugin-reports-ticket-table{
    .time{
      color: $color-content;
    }
    .total{
      color: $color;
      font-weight: bold;
    }
  }
</style>